<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>comment</title>
	 <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	<link rel="stylesheet" type="text/css" href="semantic/css/semantic.min.css">
	<link rel="stylesheet" type="text/css" href="semantic/css/comment.css">
</head>
<body>
<div class="pusher-wrap">
<!-- 	<div class="ui vertical  sidebar menu left">
		<a class="active item">welcome</a>
		<a class="item"><span>0</span>&nbsp;discussions</a>
		<a class="item"><span>0</span>&nbsp;updates</a>
		<a class="item">traffic</a>
		<a class="item">settings</a>
	</div> -->
	<div class="pusher">
		<div id="header">
		    <div class="ui container">
		        <div class="left">
		            <img src="../Common/logo.jpg" />
		        </div>
		        <div id="menu" class="right">
		            <div class="menu item">文档</div>
		            <div class="menu item">收藏</div>
		            <div class="menu item">广场</div>
		            <div class="menu item">
		                <i class="icon alarm"></i>
		                <span class="unread"></span>
		            </div>
		            <div class="menu item">
		                <div class="ui pointing dropdown link item">
		                    <span class="text"><img id="head" src="../Common/head.jpg" /></span>
		                    <i class="dropdown icon"></i>
		                    <div class="menu">
		                        <div class="item">我的文档</div>
		                        <div class="item">我的收藏</div>
		                        <div class="item">个人设置</div>
		                        <div class="divider"></div>
		                        <div class="item">退出</div>
		                    </div>
		                </div>
		            </div>
		        </div>
		    </div>
		</div>    
<!-- 	    <div class="ui segment book">
		    <div class="ui container">
		      	<div class="book-name"><h1>BookName</h1></div>
		      	<div class="book-description"><h3>hang yong hao is a SB — <a href="#">HSB</a></h3>
		      	</div>
		      	 <div class="ui large secondary  pointing menu">
		      	 	<a class="toc item"><i class="sidebar icon"></i></a>
			        <a class="item">首页</a>
			        <a href="comment.html" class="item active"><span style="">0</span>&nbsp;评论</a>
			        <a href="history.html" class="item"><span>0</span>&nbsp;历史记录</a>
			        <a class="item">收藏记录</a>
			        <a class="item">设置</a>
		        </div>
		    </div>
	    </div> -->
	    <div class="ui container">
	        <div class="row">
	            <p class="book title">KKBOX iOS/Mac OS X 基本開發教材</p>
	            <p class="book description">一份讓新成員可以進入 KKBOX 開發維護工作的學習指南<span> — 作者名</span></p>
	        </div>
	        <div class="ui secondary pointing menu">
	            <a class="item" href="../Detail/index.html">前言</a>
	            <a href="../Catalog/index.html" class="item">目录</a>
	            <a href="../Comment/index.html" class="item active"><span>0</span>评论</a>
	            <a href="../History/index.html" class="item"><span>0</span>历史</a>
	            <a class="item">设置</a>
	        </div>
        </div>
	    <div class="ui container segment">
		    <div class="ui comments">
			    <h3 class="ui dividing header">评论区</h3>
				<div class="comment">
				    <a class="avatar"><img src="http://www.kancloud.cn/Uploads/avatar/000/019/97/03/middle.gif"></a>
				    <div class="content">
				      	<a class="author">林**</a>
				      	<div class="text">这本书写的不错！！！</div>
				      	<div class="actions">
				      		<span>#1</span>
				      		<div class="metadata"><span class="date">Today at 5:42PM</span></div>
				      		<a class="reply replys">回复</a>
				      		<a class="cancel">取消</a>
				      	</div>
					    <form class="form-comment" action="#">
							<div class="ui right labeled left icon input">
								<i class="blue edit icon"></i>
								<input type="text" name="comment" placeholder="请输入评论">
								<a class="ui blue tag label ">添加评论</a>
							</div>
						</form>
				    </div>
				    <div class="comments">
				      	<div class="comment">
					        <a class="avatar"><img src="http://www.kancloud.cn/Uploads/avatar/000/019/97/03/middle.gif"></a>
					        <div class="content">
					        	<a class="author">韩** </a><span class="revert">回复</span><a class="author">林**</a>
					        	<span class="comment-text">:真的吗？我还没看过 真的吗？我还没看过真的吗？我还没看过真的吗？我还没看过真的吗？我还没看过真的吗？我还没看过真的吗？我还没看过真的吗？我还没看过真的吗？我还没看过真的吗？我还没看过真的吗？我还没看过真的吗？我还没看过真的吗？我还没看过真的吗？我还没看过</span>
					          	<div class="actions">
					          		<div class="metadata"><span class="date">Just now</span></div>
					          		<a  class="reply replys">回复</a>
					          		<a class="cancel">取消</a>
					          	</div>
					          	<form class="form-comment"  action="#">
							      	<div class="ui right labeled left icon input">
									  <i class="blue edit icon"></i>
									  <input type="text" name="comment" placeholder="请输入评论">
									  <a class="ui blue tag label ">添加评论</a>
									</div>
								</form>
					        </div>
				      	</div>
				      	<div class="comment">
					        <a class="avatar"><img src="http://www.kancloud.cn/Uploads/avatar/000/019/97/03/middle.gif"></a>
					        <div class="content">
					        	<a class="author">韩**</a><span class="revert">回复</span><a class="author">林**</a>
					        	<span class="comment-text">:真的吗？我还没看过 真的吗？我还没看过真的吗？我还没看过真的吗？我还没看过真的吗？我还没看过真的吗？我还没看过真的吗？我还没看过真的吗？我还没看过真的吗？我还没看过真的吗？我还没看过真的吗？我还没看过真的吗？我还没看过真的吗？我还没看过真的吗？我还没看过</span>
					          	<div class="actions">
					          		<div class="metadata"><span class="date">Just now</span></div>
					          		<a class="reply replys">回复</a>
					          		<a class="cancel">取消</a>
					          	</div>
					          	<form class="form-comment"  action="#">
							      	<div class="ui right labeled left icon input">
									  <i class="blue edit icon"></i>
									  <input type="text" name="comment" placeholder="请输入评论">
									  <a class="ui blue tag label ">添加评论</a>
									</div>
								</form>
					        </div>
				      	</div>
				    </div>
			    </div>
			    <div class="comment">
				    <a class="avatar"><img src="http://www.kancloud.cn/Uploads/avatar/000/019/97/03/middle.gif"></a>
				    <div class="content">
				      	<a class="author">林**</a>
				      	<div class="text">这本书写的不错！！！</div>
				      	<div class="actions">
				      		<span>#2</span>
				      		<div class="metadata"><span class="date">Today at 5:42PM</span></div>
				      		<a class="reply replys">回复</a>
				      		<a class="cancel">取消</a>
				      	</div>
				      	<form class="form-comment"  action="#">
							<div class="ui right labeled left icon input">
								<i class="blue edit icon"></i>
								<input type="text" name="comment" placeholder="请输入评论">
								<a class="ui bluetag label ">添加评论</a>
							</div>
						</form>
				    </div>
			    </div>
		    </div>
			<form  id="" action="#" class="ui reply form">
				<div class="left-img"><img style="" src="http://www.kancloud.cn/Uploads/avatar/000/019/97/03/middle.gif"></div>
				<div class="field" name="comment"><textarea></textarea></div>
<!-- 			    <div class="ui positive labeled submit icon button"><i class="icon edit"></i> Add Reply </div> -->
				<div class="btn-submit" title="提交评论">
					<i class="hand pointer icon"></i>
				</div>
			</form>
		</div>
		<div class="ui inverted vertical footer">
		    <div class="ui container">
		        <div class="ui grid">
		        	<div class="eight wide column">
		        		<ul class="footer-item">
		        			<li><a href="#">关于</a></li>
		        			<li><a href="#">博客</a></li>
		        			<li><a href="#">联系官方</a></li>
		        			<li><a href="#">定价</a></li>
		        			<li><a href="#">编辑器</a></li>
		        			<li><a href="#">更多</a></li>
		        		</ul>
			        </div>
			        <div class="eight wide column">
			        	<ul class="footer-item">
		        			<li><a href="#">© Friendcode Inc 2016</a></li>
		        			<li><a href="#" style="color: #00B5AD;">FLLOW@AccurateMedicine</a></li>
		        		</ul>
			        </div>
		        </div>
		    </div>
		</div>
	</div>
</div>
</body>
<script type="text/javascript" src="semantic/js/jquery.min.js"></script>
<script type="text/javascript" src="semantic/js/semantic.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$('.cancel').hide();
		$('.form-comment').hide();
	});
	/**
	 * 回复
	 */
	$('.replys').click(function(){
		$(this).parent('.actions').find('.cancel').show();
		$(this).parent('.actions').parent('.content').find('.form-comment').show();
		$(this).hide();
	});

	/**
	 *取消
	 */
	$('.cancel').click(function(event) {
		$(this).parent('.actions').find('.reply').show();
		$(this).parent('.actions').parent('.content').find('form').hide();
		$(this).hide();
	});

	/**
     * 失去焦点的时候隐藏
	 */
	$('input').blur(function(){
		$(this).parent().parent('form').parent('.content').find('.actions').find('.reply').show();
		$(this).parent().parent('form').parent('.content').find('.actions').find('.cancel').hide();
		$(this).parent().parent('form').hide();
	})
</script>
</html>